// OG Labs
Design System · Vol. 01
Loading
// Studio is opening
Design System.
Aligning tokens█
// OG LABS DESIGN ACADEMY · DESIGN SYSTEM · VOL. 01

Design System.

3 COLORS
4 TYPEFACES
ZERO GRADIENTS*
ZERO BLUR (on ink)
HARD SHADOWS ONLY
// COLORS

Core Palette

Three colors. The entire palette. No greys — only transparency of ink or paper. Signal red is used once: the accent.

// 01 PAPER
Paper
#FAFAF6
// 02 INK
Ink
#0A0A0A
// 03 SIGNAL
Terminal Red
#FE1300
// TINTS

Ink & Paper Tints

Transparency is the only way to generate hierarchy. No off-grey or midtone variables.

// PAPER ON INK
85paper/85
65paper/65
45paper/45
25paper/25
15paper/15
04paper/04
// INK ON PAPER
85ink/85
65ink/65
45ink/45
25ink/25
12ink/12
06ink/06
// TYPOGRAPHY

Serif Scale — DM Serif Display

The editorial voice. Commands attention. Italic at signal-red for the accent phrase in every hero headline.

Hero
India's online design school.
clamp(3rem,7vw,6rem)
H1 · Section
How Interfaces Think?
48px / lh 1.05
H2 · Heading
Built like a real design school
36px / lh 1.08
H3 · Card
Interaction Design Fundamentals
24px / lh 1.15
Step numeral
01
48–56px · signal
// MONO LABELS

JetBrains Mono

Every label, caption, metadata, button, annotation — uppercase, heavy tracking. The structural skeleton of the brand.

Masthead · 9px
// OG Labs Design Academy
9px / 0.35em
Section label · 10px
// OUR INSTRUCTORS
10px / 0.3em / red
Meta · 10px
July 2026 · 4 weeks · Live on Zoom · ₹3,999
10px / 0.24em
Attribution · 11px
Krishna Gaurav · Design Leader
11px / 0.2em
Button · 12px
12px / 0.2em
Status · pulse
Applications Open
animate-pulse dot
// TYPE FAMILIES

All Four Families

// SERIF
Aa & Ii
DM Serif Display — headlines only
// MONO
Aa 01
JetBrains Mono — labels, meta, buttons
// SANS (BODY)
Aa & Ii
Inter 400/500 — body paragraphs only
// LOGO
OGLABS
Archivo 700–900 — wordmark only
// SPACING

Scale

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
space-16
64px
space-20
80px
space-24
96px
// BORDERS & RULES

Border System

Borders are the primary structural device. No drop-shadows on cards — the 2px rule carries all the weight.

1px solid · hairline
1px dashed · internal
2px solid · structural
4px signal · section rule
1px dashed/15 · dark divider
1px dashed/10 · masthead
// SHADOWS

Hard Offset Only. No Blur. Ever.

Brut-sm · card hover
2·2 ink
Signal-md · button rest
4·4 signal
Signal-lg · button hover
6·6 lift
Contact card · 6·6 ink
6·6 ink
Glass card · soft depth
Glass depth
// MOTION

Timing & Easing

Minimal and purposeful. No spring, no bounce, no parallax on scroll (latest home uses framer-motion for a subtle parallax — a contained exception).

dur-fast
120ms — hover color switches
120ms
dur-base
200ms — border fades, card hovers, button lifts
200ms
dur-slow
400–500ms — kinetic discipline cross-fade
400ms
ease-standard
cubic-bezier(0.4,0,0.2,1)
standard
ease-linear
linear — marquee, shimmer, card-sheen
linear
animate-pulse
2s ease-in-out infinite — status dots
2s
card-sheen
2.4s linear infinite — glass card shimmer, only on hover
2.4s
marquee
30–38s linear infinite — institution strip, pauses on hover
30–38s
// LOADER

Design System Loader

The boot state uses only system primitives: ink background, paper grid, signal-red progress, mono rails, serif title, pulse status, and hard rules.

// OG Labs
Design System · Vol. 01
Loading
// Studio is opening
Design System.
// Loading components █
72%
// COMPONENTS

Buttons

Primary — Signal red, hard shadow, hover lifts
Ghost light — transparent, ink border
Ghost dark — paper border
CTA inline text — unicode arrow in copy
→ Apply for July cohort   ↗ External links   · Separator
// BADGES & STATUS

Badges

No rounded pills — all badges are rectangular with `border-radius:0`. Status is communicated by border color and the pulse dot.

Applications Open [ LIVE ] [ UPCOMING ] Vol. 01 · July 2026
[ UPCOMING ] July 2026 · Live cohort Cohort 04
// CARDS

Card Variants

Standard card — rest state
July 2026 · ₹3,999

Interaction Design Fundamentals

The thinking behind design decisions.

4 weeks · Live · By conversation
Standard card — hover state
July 2026 · ₹3,999

Interaction Design Fundamentals

The thinking behind design decisions.

4 weeks · Live · By conversation
Glass card — liquid-glass hero card (new in latest commit)
// Upcoming flagship course

How Interfaces Think?

4 weeks · 3 sessions/week · Live on Zoom

// INPUTS

Form Inputs

Only two variants: dark (footer/newsletter) and light (contact page). Both use JetBrains Mono. Border turns signal-red on focus.

Dark — newsletter / modals
No spam · A human replies within 24 hours
Light — contact / registration
Full Name *
Email *
// MASTHEAD RAIL

3-Column Newspaper Rail

Opens every dark section (hero, footer). Three cells: brand // volume // status. Dashed dividers. Reads like a broadsheet masthead.

// OG Labs Design Academy
Vol. 01 · July 2026
Applications Open
// KINETIC DISCIPLINES

KineticDisciplines Component

New in latest commit. Lives in the bottom-right dead-zone of the hero, below the flagship card. Numbered list; active row cross-fades at 2.4s intervals. Echoes the active name large below. Honors prefers-reduced-motion.

// What this school teaches
now reading →
// FAQ PATTERN

FAQ — Two-Column Grid

New in latest commit. Q and A sit in a 5:7 grid split. Q uses DM Serif Display, A uses Inter. Separated by a hairline border-b border-[ink/15].

What is OG Labs Design Academy?
India's online design school. We run live cohort sessions in interaction design, communication design, research, strategy, and typography.
Are the cohort sessions taught live?
Yes. Every cohort session is live on Zoom. Three 90-minute sessions a week with the instructor and a small group. Workshops may be offered as recordings.
How do I enroll?
Enrollment is admissions-led. You register your interest, our team gets on a short call, sends a payment link, and activates your student access. A seat is a commitment, not a cart item.
// COMPARISON PANEL

Live vs. Recorded

New in RedesignPage.tsx. Two-column with ink/paper contrast. Check/X icons are small signal-red filled circles (yes) vs muted (no). No tables.

// the rest of the internet

Recorded courses

Watch on your own time
60–90% drop-off after week 2
No critique, no peer review
Certificate of completion
// the OG way

OG Labs cohorts

Live every session, questions in real time
Cohort accountability — you finish what you start
1:1 office hours with practicing designers
Portfolio you can defend in interviews
// CODE BLOCK

Curriculum-as-Code

From RedesignPage. Syllabus presented as syllabus/interaction.json in a macOS-style window. Tabs switch the track. Syntax colors use the signal-family palette only.

syllabus / interaction.json
// How Interfaces Think? const interaction = { cohort: "July 2026", duration: "12 weeks · 3×/week", modules: [ "Mental models & perception", "Decision design", "Behavior systems", "Critique & defense", "Portfolio capstone" ], format: "live · zoom · 1:1 office hours" };
// BRAND

Wordmarks

OG Labs black wordmark
OG Labs white wordmark
logo-black.svg · on paper
logo-white.svg · on ink
// INSTITUTIONS

Faculty Lineage

SVG marks always black on white cell. 2px dividers. Always grayscale.

IIT Bombay IIT BOMBAY
NID NID
NIFT NIFT
// ICONOGRAPHY

Lucide + Unicode

Lucide React (0.487.0). Stroke 1.5px, 14–16px size. Used sparingly — never more than one icon per button. Unicode symbols → ↗ · — used in copy.

ArrowRight
ArrowUpRight
ChevronRight
CheckCircle2
Loader2
Mail
Sparkles
Zap
→CTA ↗External ·Meta sep —Em dash // Section prefix
// HERO PATTERN

Dark Masthead Hero

Full hero specimen. 3-col masthead rail → 12-col content grid → flagship glass card right. Grid texture at 0.04 opacity. Subtle radial red bloom behind the card. KineticDisciplines below the card on lg+.

// OG Labs Design Academy
Vol. 01 · July 2026
Applications Open
01 The thesis

India's online design school.

Four-week live cohorts where you learn to think like a designer. Three sessions a week, taught online by alumni from NID, IIT Bombay and IIT Guwahati.

No spam · No drip funnels · A human replies within 24 hours
// Upcoming flagship course

How Interfaces Think?

4 weeks · 3 sessions/week · Live on Zoom

Seats are limited. View syllabus ↗
// COPY RULES

Voice & Vocabulary

// PREFERRED
→ Register for July Cohort
→ Applications Open
→ View Syllabus / Browse Disciplines
→ Interaction Design Fundamentals
→ "Seats are limited. Enrollment is by conversation."
→ "A seat in this cohort is not a cart item."
→ Vol. 01, The thesis, Lineage, Admissions
// BANNED
Buy Course / Add to Cart / Checkout
Sign Up / Learn More
Discount / Sale / Bundle / Special Offer
Figma Masterclass / React for Designers
Taught by [Name]
Emoji anywhere in the UI
// MICRO-CONVENTIONS
// PREFIX — double-slash before all section labels (dev-style structural markers)
4 weeks · 3 sessions/week — middle-dot separates meta, never comma
01 / 02 / 03 — zero-padded numerals in serif at 48–56px signal-red
[ LIVE ] / [ UPCOMING ] — brackets for status tags
CTA arrows are unicode → (right) and ↗ (external)
// RESPONSIVE

Breakpoints, Containers, Body Scale

Mobile-first. Five breakpoints. Three container widths. Inter body scale fixed in pixels for predictable Figma frames.

Breakpoints
sm
Mobile L · single column
≥ 640px
md
Tablet · 2-col grids
≥ 768px
lg
Laptop · 12-col + sidebar
≥ 1024px
xl
Desktop · default canvas
≥ 1280px
2xl
Wide displays
≥ 1536px
Container max-widths
prose
Long-form copy
640px
narrow
FAQ, comparison
880px
default
Standard pages
1200px
wide
Hero, masthead
1440px
Body type scale (Inter)
lede
Lede paragraph — section opener.
18px / 1.6
body
Default body copy.
16px / 1.6
small
Small body, captions.
14px / 1.55
xs
Footnotes.
13px / 1.55
// Z-INDEX

Stack Order

base
page content
0
raised
cards on hover
10
sticky
top nav, sticky filters
20
dropdown
menus, autocomplete
30
overlay
modal backdrop
40
modal
modal content, drawer
50
toast
toasts, alerts
60
tooltip
tooltips, popovers
70
// OPACITY

Transparency Scale

The only way to generate hierarchy. Use these exact stops — never a custom value.

04
12
25
45
65
85
// TOKENS.JSON

Figma Tokens Studio Export

Use tokens/tokens.figma.json for Figma Tokens Studio. Use root tokens.json as the source file for this repo.

Download Figma tokens → Download tokens.json → View INTEGRATION.md ↗
// FIGMA IMPORT
01. Install the Tokens Studio plugin in Figma.
02. Open Tokens Studio, then choose Import JSON.
03. Select tokens/tokens.figma.json and import all sets.
// CSS
tokens.css
Custom properties · drop into any project
// TAILWIND 4
tokens.tailwind.js
Preset · presets: [require('./tokens')]
// SCSS
tokens.scss
$variables · @use 'tokens';
// ES MODULE
tokens.js
import { color, spacing } from '@oglabs/design-system'
// Compatible with: Figma Tokens Studio · Style Dictionary · Tailwind 4 · Canva Brand Kit · plain CSS · SCSS · ES modules
// Regenerate: npm run build
// TOP NAVIGATION

Site Header

Sticky on scroll (z-index 20). Logo left, links center, CTA + actions right. Mobile collapses to hamburger drawer.

Light header — default
OG Labs
Courses Disciplines Workshops About
Dark header — hero variant
OG Labs
Courses Disciplines Workshops About
Mobile drawer — full-screen
OG Labs
Courses Disciplines Workshops About
// FORM EXTRAS

Textarea, Select, Checkbox, Radio, Toggle

All controls share a 2px ink border and JetBrains Mono. Selected state is signal-red. No rounded corners except on radio.

Why this course? *
⚠ Please write at least 80 characters
Discipline
✓ Looks good
Tracks (multi-select)
Cohort
Notify me
// TABS

Tab Pattern

Used on the syllabus to switch between weeks/tracks. Underline is signal-red, 2px, animates 200ms.

Three live sessions with the cohort. Reading assignments shared every Sunday. One critique workshop, one office-hours block.
// ACCORDION

Expandable Rows

For syllabus week breakdowns and FAQ. The plus rotates 45° to become an X. Closed state shows mono week label + serif title.

How users build internal models. Affordances, signifiers, mappings. Three live sessions on Norman, Krug, and Tufte. Critique on a real product.
Cognitive load, choice architecture, defaults. Workshop: re-design a checkout in 90 minutes.
Habits, hooks, momentum. Reading: Eyal, Fogg.
// TOOLTIP

Tooltip / Popover

Ink background, signal-red border & arrow. Mono font for terse hints. Appears on hover after 200ms delay.

Explains the action
Cohort 04
July 14 — August 8, 2026
// TOAST / ALERT

Notifications

Bottom-right stack. Auto-dismiss after 5s. Border-left signal-red rule. Hard offset shadow.

Application Sent
Our admissions team will reply within 24 hours.
// Status
July cohort: 8 of 12 seats remaining.
Error
Couldn't send — please retry in a moment.
// PROGRESS

Progress & Stepper

Linear bar for cohort fill. Stepper for application flow. No green — only ink (done) and signal (active).

Seats filled8 / 12
Application stepper
✓Apply
02Interview
03Pay
04Onboard
// PAGINATION

Pagination

…
// TAGS / CHIPS

Tags & Filter Chips

Discipline tags use the 3-letter code (IXD, COM, RES, STR, TYP, INV). Active state inverts to ink-on-paper.

IXD · Interaction COM · Communication RES · Research STR · Strategy TYP · Typography + New
// AVATARS

Avatar & Instructor Card

Square only — no rounded photos. Instructor portrait is 4:5 ratio. Initials fallback uses serif at 22px.

KG
AS
RP
KG
Krishna Gaurav
// Design Leader · NID
// STAT BLOCK

Numeric Specimens

Big numerals in DM Serif at 56px, signal-red. Mono caption below.

04
Weeks · Live cohort
12
Seats per cohort
3×
Sessions per week
₹3,999
Per cohort · all-in
// PULL QUOTE

Editorial Quote

"The thinking behind a design decision matters more than the pixels. We teach the thinking."

— Krishna Gaurav · Founder · OG Labs
// SKELETON

Loading State

Subtle ink shimmer at 200% width, 1.4s linear loop. Only used while waiting on async content.

// MARQUEE

Institution Strip

Continuously scrolling band. 30s linear loop. Pauses on hover.

NID Ahmedabad· IIT Bombay · IDC· NIFT· IIT Guwahati· Pearl Academy· Srishti Manipal· NID Ahmedabad· IIT Bombay · IDC· NIFT· IIT Guwahati·
// EMPTY STATE

No Results / No Data

// ø
No upcoming cohorts in this discipline
Join the waitlist to get a single email when admissions open.
// RESPONSIVE SPECIMENS

Mobile & Tablet

Hero collapses to single column. Masthead stacks. Cards go full-width with reduced padding.

// 375 × 812 · Mobile (iPhone)
≡
// VOL. 01

India's online
design school.

Four-week live cohorts. Three sessions a week.

Applications Open
// Flagship
How Interfaces Think?
4 weeks · Live
// 768 × 1024 · Tablet (iPad)
// OG Labs
Vol. 01 · July 2026
Open

India's online
design school.

Four-week live cohorts where you learn to think like a designer.

// Flagship
How Interfaces Think?
// ACCESSIBILITY

Focus Rings

Every interactive element shows a 2px signal-red outline at 2px offset on :focus-visible. Never remove it. Tab through this section to verify.

link with focus
CSS: *:focus-visible { outline: 2px solid #FE1300; outline-offset: 2px; }
// CONTRAST AUDIT

WCAG 2.1 Pairings

Every text/background pair tested against AA (4.5:1 normal text, 3:1 large text). Flagged pairs are decorative-only — never use them for body copy.

Ink on Paper#0A0A0A / #FAFAF6Aa Body textAAA · 19.5:1
Paper on Ink#FAFAF6 / #0A0A0AAa Body textAAA · 19.5:1
Signal on Paper#FE1300 / #FAFAF6Aa Body textAA · 4.7:1
Signal on Ink#FE1300 / #0A0A0AAa Body textAA · 4.1:1
Paper-65 on Inkpaper/65 / inkAa Body textAA · ~9:1
Paper-45 on Inkpaper/45 / inkAa DecorativeFAIL · 4.0:1
Paper-25 on Inkpaper/25 / inkAa DecorativeFAIL · < 3:1
Ink-45 on Paperink/45 / paperAa DecorativeFAIL · 4.4:1
Rule: Use opacity/45 and below for ornamental labels, dividers, mono captions on dark — never paragraph text. The body text token (paper/65 on ink, ink/65 on paper) is the floor.
// TAP TARGETS

Minimum 44 × 44

All interactive elements meet WCAG 2.5.5 (44 × 44 px minimum on touch). Mono "ghost text" links keep their visible label small but use generous padding for the hit area.

44 × 44
The icon itself is 18×18, but the hit area is padded out to 44×44. Same rule for nav links: visible text 10px, but row height ≥ 44.
// DOWNLOADS

Brand Assets

One-click downloads for designers working in Figma, Canva, Illustrator, or anywhere else.

// JSON
tokens.json
Figma Tokens Studio · Tailwind · Style Dictionary
// PDF (PRINT TO PDF)
Brand Sheet (1-page)
Print to PDF · A4 · for Canva uploads
// SVG
Logo (black)
logo-black.svg
// SVG
Logo (white)
logo-white.svg
Fonts: DM Serif Display ↗ · JetBrains Mono ↗ · Inter ↗ · Archivo ↗
// ICON LIBRARY

Lucide Icon Set (Static SVG)

Click any icon to copy its SVG markup to clipboard — paste directly into Canva, Figma, or HTML. Stroke-width 1.5px, 16px default.

From lucide.dev · 1,500+ icons available · Use data-lucide="icon-name" in HTML.